<template>
    <el-form :model="form" label-position="right" ref="formRef" :rules="formRules" :class="{ 'borderNone': disabled }"
        :disabled="disabled">
        <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="销售合同" required>
                    <ts-select v-if="!disabled" v-model="form.omOrderId" :label="form.omOrderNo" fileName="OrderReport"
                        :template="omOrderTemplate" :mapping="omOrderMapping" @updateRow="updateOmOrder"></ts-select>
                    <span v-else>{{ form.omOrderNo }}</span>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="币种" required>
                    <span>{{ form.currencyName }}</span>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="客户名称" required>
                    <span>{{ form.custName }}</span>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="操作员" required>
                    <span>{{ form.createBy }}</span>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="收汇日期" required>
                    <el-date-picker v-if="!disabled" v-model="form.paymentDate" value-format="YYYY-MM-DD" />
                    <span v-else>{{ form.paymentDate }}</span>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="收汇金额" required>
                    <el-input-number v-model="form.amount" @change="handleLocalAmount" />
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="汇率" required>
                    <el-input-number  v-model="form.exchangeRate" @change="handleLocalAmount"/>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="本币金额" required>
                    {{form.localCurrencyAmount}}
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="备注" >
                    <el-input  v-model="form.remark" type="textarea"/>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <div class="button-position">
        <el-button @click="emit('updatetable')">退 出</el-button>
        <el-button type="primary" v-if="optType === 'add'" @click="save(formRef)">确 定</el-button>
        <el-button type="primary" v-if="optType === 'update'" @click="update(formRef)">更 新</el-button>
    </div>
</template>
<script setup>
import { reactive, ref, onMounted, watch} from "vue";
import { ElNotification } from "element-plus";
import API from '@/api/model/fa'
import tsSelect from "@/components/scSelect/index.vue";
import { deepClone } from "@/utils/arr";
import tool from "@/utils/tool";
const emit = defineEmits(["updatetable"]);
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {},
    },
});
const form = ref({})
const disabled = ref(false)
const optType = ref()
onMounted(() => {
    optType.value = props.paramsData.optType || 'add'
    getInit()
})
const getInit = async () => {
    if (optType.value === "detail") {
        disabled.value = true;
    }
    let res;
    if (optType.value === "add") {
        res = await API.receipt.add.post();
    } else {
        res = await API.receipt.detail.post(props.paramsData);
    }
    if (res.code == "200") {
        form.value = deepClone(res.data);

    }
};
const omOrderTemplate = {
    label: "omOrderNo",
    value: "omOrderId",
};
const omOrderMapping = [
    { value: "number", label: "omOrderNo" },
    { value: "id", label: "omOrderId" },
    { value: 'custName', label: "custName" },
    {value:'currencyId',label:'currencyId'}
];
const updateOmOrder = (val) => {
    form.value.omOrderNo = val.omOrderNo
    form.value.custName = val.custName
    form.value.currencyName = val.currencyId
}
const handleLocalAmount = ()=>{
    form.value.localCurrencyAmount = tool.formatRoundNum(form.value.amount*form.value.exchangeRate,2)
}
const save = async () => {
    let param = {
        bean: form.value,
    };
    let res = await API.receipt.save.post(param);
    if (res.code == "200") {
        optType.value === "save";
        ElNotification.success({
            title: "",
            message: "添加成功！",
            duration: 2000,
        });
        emit('updatetable', true)
    }
};
const update = async () => {
    let param = {
        bean: form.value,
    };
    let res = await API.receipt.update.post(param);
    if (res.code == "200") {
        ElNotification.success({
            title: "",
            message: "更新成功！",
            duration: 2000,
        });
        emit('updatetable', true)
    }
};
</script>
<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }

    :deep(.el-textarea__inner) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;
    }
}
</style>